<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>


</head>
<body>
<div id="app">
    username：<el-input v-model="pageUser.username" placeholder="请输入用户名"></el-input>
    gender：<el-input v-model="pageUser.gender" placeholder="请输入性别"></el-input>
    email：<el-input v-model="pageUser.email" placeholder="请输入邮箱"></el-input>





    <el-table :data="tableData" stripe>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" align="center">
            <!--
            slot-scope：作用域插槽，可以获取表格数据
            scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                </el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Pagination.pageCurrent"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="Pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Pagination.total"
                style = "float:right">
        </el-pagination>
    </div>
    <el-button  @click="find" type="success" round>查询</el-button>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            tableData: [],
            Pagination:{
                pageSize: 1,
                pageCurrent: 1,
                total:1
            },
            pageUser: {
                "username": "",
                "gender": "",
                "email": ""
            }
        },
        created() {
            this.find();
        },
        methods: {
            find() {
                axios.post("/user/" + this.Pagination.pageCurrent + "/" + this.Pagination.pageSize, this.pageUser).then(res => {
                    this.tableData = res.data.users;
                    this.Pagination.total=res.data.total;
                })
            },
            handleUpdate(row) {
                alert(row.date);
            },
            handleDelete(row) {
                alert(row.date);
            },
            handleCurrentChange(row){
                this.Pagination.pageCurrent=row;
                this.find();
            },
            handleSizeChange(row){
                this.Pagination.pageSize=row;
                this.find();
            }
        },
    });
</script>

</body>
</html>